<template>
  <div class="customer-chat w-960px h-600px bg-#ffffff flex">
    <div class="flex-1 flex flex-col">
      <div class="w-full overflow-hidden" border="b b-solid #efeff4">
        <ChatHeader :show-base="showBase" @switch-show-base="switchShowBase"></ChatHeader>
      </div>
      <div class="flex-1 overflow-hidden">
        <ChatContent :msg-list="msgList"></ChatContent>
      </div>
      <div class="w-full h-160px overflow-hidden" border="t t-solid #efeff4">
        <ChatTools @submit-msg="submitMsg"></ChatTools>
      </div>
    </div>
    <div v-if="showBase" class="w-240px h-full overflow-hidden" border="l l-solid #efeff4">
      <ChatBase></ChatBase>
    </div>
  </div>
</template>

<script setup>
import ChatHeader from './components/ChatHeader.vue';
import ChatContent from './components/ChatContent.vue';
import ChatTools from './components/ChatTools.vue';
import ChatBase from './components/ChatBase.vue';
import { ref, shallowRef } from 'vue';

const msgList = ref([
  {
    id: new Date().getTime(),
    msg: '访客103893558077660您好,我是 Evil-Admin技术支持',
    type: 'MsgCard',
  },
  {
    id: new Date().getTime(),
    msg: '访客103893558077660您好,我是 Evil-Admin技术支持',
    type: 'MsgB2C',
  },
  {
    id: new Date().getTime(),
    msg: '您好',
    type: 'MsgC2B',
  },
  {
    id: new Date().getTime(),
    msg: '您的会话将在3分钟结束，如需继续咨询，可以直接发送消息',
    type: 'MsgTips',
  },
]);
function submitMsg(e) {
  msgList.value.push({
    id: new Date().getTime(),
    msg: e,
    type: 'MsgC2B',
  });
}

const showBase = shallowRef(true);
function switchShowBase() {
  showBase.value = !showBase.value;
}
</script>

<style lang="scss"></style>
<style scoped lang="scss">
.customer-chat {
  border-radius: 8px;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
}
</style>
